<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-container">
      <div class="mt-10 spl-step">
        <el-steps :active="active" align-center>
          <el-step title="选择台账"></el-step>
          <el-step title="生成代发单"></el-step>
          <el-step :title="thirdTitle"></el-step>
          <el-step :title="fourthTitle"></el-step>
        </el-steps>
      </div>
      <!--第一步-->
      <div v-show="active==0">
        <dTable @fetch="getFirstTableData" ref="firstTable" :tableHeight="firstTableHeight" :paging="false" :showSelection="true" :showIndex="true">
          <el-table-column prop="serialNumber" label="台账编号" width="240" header-align="center" align="left"></el-table-column>
          <el-table-column prop="yearDateStr" label="台账年月" width="280" header-align="center" align="center"></el-table-column>
          <el-table-column prop="totalNumber" label="总人数" width="200" header-align="center" align="left"></el-table-column>
          <el-table-column prop="totalAmount" label="总金额" width="200" header-align="center" align="right"></el-table-column>
          <el-table-column prop="actualTotalAmount" label="实发总金额" min-width="180" header-align="center" align="right"></el-table-column>
          <el-table-column prop="taxTotalAmount" label="个税总金额" min-width="180" header-align="center" align="right"></el-table-column>
          <el-table-column prop="successAmount" label="发放成功金额" min-width="180" header-align="center" align="right"></el-table-column>
          <el-table-column prop="failedAmount" label="发放失败金额" min-width="180" header-align="center" align="right"></el-table-column>
        </dTable>
        <div class="operate-btns-bottom pt-20">
          <el-button type="primary" @click="firstNextStep">下一步</el-button>
        </div>
      </div>
      <!--第二步-->
      <div v-show="active!=0" class="substituteSalary">
        <div class="emp-title mt-20">
          <i class="ic-substitute fl mr-30"></i>
          <el-row :gutter="22">
            <el-col :span="6"><p>账单编号：<span v-text="billNumber"></span></p></el-col>
            <el-col :span="6"><p>账单年月：<span v-text="summaryData.billDate"></span></p></el-col>
            <el-col :span="5"><p>账单总金额：<span v-text="$global.milliFormat(summaryData.billTotalAmount,2)"></span>元</p></el-col>
            <el-col :span="5"><p>服务费金额：<span v-text="$global.milliFormat(summaryData.serviceFeeTotalAmount,2)"></span>元</p></el-col>
          </el-row>
        </div>
        <div class="search-row clearfix">
          <div class="salary-type ml-0">
            <div class="type"><p class="mt-7">工<br>资<br>薪<br>金</p></div>
            <div class="content">
              <p class="text">实发合计：<span v-text="$global.milliFormat(summaryData.salaryActualAmount,2)"></span>元</p>
              <p class="text">个税合计：<span v-text="$global.milliFormat(summaryData.salaryTaxAmount,2)"></span>元</p>
            </div>
          </div>
          <div class="salary-type">
            <div class="type"><p class="mt-16">年<br>终<br>奖</p></div>
            <div class="content">
              <p class="text">实发合计：<span v-text="$global.milliFormat(summaryData.yearEndBonusActualAmount,2)"></span>元</p>
              <p class="text">个税合计：<span v-text="$global.milliFormat(summaryData.yearEndBonusTaxAmount,2)"></span>元</p>
            </div>
          </div>
          <div class="salary-type">
            <div class="type"><p class="mt-7">劳<br>务<br>报<br>酬</p></div>
            <div class="content">
              <p class="text">实发合计：<span v-text="$global.milliFormat(summaryData.remunerationActualAmount,2)"></span>元</p>
              <p class="text">个税合计：<span v-text="$global.milliFormat(summaryData.remunerationTaxAmount,2)"></span>元</p>
            </div>
          </div>

          <div class="fr mt-60">
            <el-input class="w-300 ml-15" v-model="searchText" placeholder="请输入姓名、身份证号或银行卡号查询">
              <span slot="suffix" class="f-cursor" @click="getSecondTableData"><i class="el-icon-search font-16 mr-5"></i></span>
            </el-input>
            <el-button type="primary" class="opt-btn ml-15 s-btn" @click="exportSearchData">下载筛选结果</el-button>
          </div>
        </div>

        <div>
          <dTable @fetch="getSecondTableData" ref="secondTable" :tableHeight="secondTableHeight" :showIndex="true">
            <el-table-column :key="$global.generate('col',10)" prop="employeeName" label="员工姓名" size="150" header-align="center" align="left"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="employeeIdCard" label="证件号码" min-width="120" header-align="center" align="left"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="telephone" label="手机号码" min-width="120" header-align="center" align="left"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="deptName" label="组织部门" min-width="200" header-align="center" align="left"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="presidentName" label="岗位" min-width="200" header-align="center" align="left"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="empBankAccount" label="银行账号" min-width="220" header-align="center" align="left"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="itemTypeDesc" label="收入类型" min-width="180" header-align="center" align="left"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="incomeDate" label="费用年月" min-width="200" header-align="center" align="center"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="plannedAmount" label="应发金额" min-width="200" header-align="center" align="right"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="taxAmount" label="应缴个税" min-width="200" header-align="center" align="right"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="actualAmount" label="实发金额" min-width="200" header-align="center" align="right"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="serviceFeeAmount" label="服务费" min-width="200" header-align="center" align="right"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="socialSecurityAmount" label="个人社保" min-width="200" header-align="center" align="right"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="accfundAmount" label="个人公积金" min-width="200" header-align="center" align="right"></el-table-column>
            <!--<el-table-column prop="residenceType" label="x薪酬项"></el-table-column>-->
            <el-table-column :key="$global.generate('col',10)" v-for="(item, index) in salaryItems" :prop="item" :label="item" min-width="200" header-align="center" align="right">
              <template slot-scope="scope">
                <span v-text="scope.row.salaryItems==null?'':scope.row.salaryItems[item]"></span>
              </template>
            </el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="totalTaxThreshold" label="累计减除费用" min-width="200" header-align="center" align="right"></el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="residenceType" label="累计子女教育扣除" min-width="200" header-align="center" align="right">
              <template slot-scope="scope">
                <span v-text="scope.row.taxAdditionalItems['70018001']"></span>
              </template>
            </el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="residenceType" label="累计继续教育扣除" min-width="200" header-align="center" align="right">
              <template slot-scope="scope">
                <span v-text="scope.row.taxAdditionalItems['70018005']"></span>
              </template>
            </el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="residenceType" label="累计赡养老人扣除" min-width="200" header-align="center" align="right">
              <template slot-scope="scope">
                <span v-text="scope.row.taxAdditionalItems['70018004']"></span>
              </template>
            </el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="residenceType" label="累计住房租金扣除" min-width="200" header-align="center" align="right">
              <template slot-scope="scope">
                <span v-text="scope.row.taxAdditionalItems['70018003']"></span>
              </template>
            </el-table-column>
            <el-table-column :key="$global.generate('col',10)" prop="residenceType" label="累计住房贷款扣除" min-width="200" header-align="center" align="right">
              <template slot-scope="scope">
                <span v-text="scope.row.taxAdditionalItems['70018002']"></span>
              </template>
            </el-table-column>

            <template slot="pagination-btns">
              <!--第三步才有-->
              <el-button type="primary" class="opt-btn s-btn" icon="el-icon-printer" v-if="active==2">打印账单</el-button>
            </template>
          </dTable>
        </div>
        <div class="operate-btns-bottom pt-20">
          <el-button class="cancel-btn-border" v-if="active!=3 && !remittedFlag && (billedNumber=='' || (billedNumber!='' && active!=1))" @click="--active">上一步</el-button>
          <!--第二步才有-->
          <el-button type="primary" class="ml-30" v-if="active==1" @click="++active">下一步</el-button>

          <!--第三步才有-->
          <el-button type="primary" class="ml-30" v-if="active==2 && !remittedFlag" @click="payDialogVisible=true">付款</el-button>

          <el-button type="primary" class="ml-30" v-if="active==2 && remittedFlag" @click="confirmPayVisible=true">我已汇款</el-button>
        </div>
      </div>
    </div>

    <el-dialog title="付款" class="spl-dialog" :visible.sync="payDialogVisible" :closeOnClickModal="false" width="730px">
      <el-form :model="dataForm" ref="dataForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="账单金额" prop="date" class="pay-form-item">
          <p class="pl-20"><span class="text-orange fw-blod ml-10" v-text="$global.milliFormat(summaryData.billTotalAmount,2)"></span>&nbsp;&nbsp;元</p>
        </el-form-item>
        <el-form-item label="资金性质及用途" prop="naturePurposeCode" class="pay-form-item"
                      :rules="[{ required: true, message: '请选择资金性质及用途'}]">
          <el-select v-model="dataForm.naturePurposeCode" ref="addFormTypeCode" placeholder="请选择" class="w-220" @change="changeNaturePurpose($event)">
            <el-option v-for="(item,index) in amountTypes" :label="item.dictName" :value="item.dictCode"></el-option>
          </el-select>
          <span class="text-orange lh-com ml-10">此信息将作为资金备注提交给银行</span>
        </el-form-item>
        <el-form-item label="预计发放日期" prop="releaseDate" class="pay-form-item">
          <el-date-picker v-model="dataForm.releaseDate" value-format="yyyy-MM-dd" type="date" class="label-sel w-220"></el-date-picker>
        </el-form-item>

        <div class="mt-15">
          <el-checkbox-group v-model="dataForm.payWays" size="small" class="w-p100">
            <el-checkbox label="1" border class="w-p100" :disabled="true">
              <span>使用余额&nbsp;&nbsp;&nbsp;&nbsp;（可用余额：<span class="fw-blod text-orange" v-text="$global.milliFormat(totalBalanceAmount,2)"></span>元）</span>
              <span class="fr">支付: <span class="fw-blod text-orange w-p100" v-text="'¥ '+$global.milliFormat(amountOnline,2)"></span></span>
            </el-checkbox>
            <el-checkbox label="2" border class="w-p100 ml-0 mt-20" v-if="showOffline" :disabled="true">
              <span>线下汇款&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-orange">余额不足，请在预计发放日前进行汇款，否则影响发放</span></span>
              <span class="fr">支付: <span class="fw-blod text-orange" v-text="'¥ '+$global.milliFormat(amountOffline,2)"></span></span>
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="div-border-radius" v-if="showOffline">
          <p class="detail-text">请汇款至以下账户</p>
          <p class="detail-text" style="margin-top: 40px;" v-text="'账户全称：'+accountFullName"></p>
          <p class="detail-text" v-text="'开户银行：'+bankName"></p>
          <p class="detail-text" v-text="'银行账号：'+bankAccount"></p>
          <p class="detail-text" v-html="'对账识别码：'+identificationCode+'&nbsp;&nbsp;（请您在充值转账时，务必填写［备注］并只填写此识别码，以便进行系统对账）'"></p>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer operate-btns-bottom mt-10">
        <el-button @click="payDialogVisible=false">取 消</el-button>
        <el-button type="primary" class="ml-30" :loading="payBtnLoading" @click="surePay">确认付款</el-button>
      </div>
    </el-dialog>

    <el-dialog title="确认打款" class="spl-dialog" :visible.sync="confirmPayVisible" :closeOnClickModal="false" width="500px">
      <el-form :model="confirmPayForm" ref="confirmPayForm" label-width="130px">
        <el-form-item label="付款帐户" prop="paymentAccount" class="pay-form-item" :rules="[{ required: true, message: '请填写付款帐户'}]" placeholder="请输入付款帐户">
          <el-input class="w-220" v-model="confirmPayForm.paymentAccount"></el-input>
        </el-form-item>
        <el-form-item label="转账金额" prop="amount" class="pay-form-item"
                      :rules="[{ required: true, message: '请输入转账金额'}]" placeholder="请输入转账金额">
          <el-input class="w-220" v-model="confirmPayForm.amount"><span slot="suffix">元</span></el-input>
        </el-form-item>
        <el-form-item label="转账日期" prop="transferDate" class="pay-form-item" :rules="[{ required: true, message: '请选择转账日期'}]" placeholder="请选择转账日期">
          <el-date-picker v-model="confirmPayForm.transferDate" value-format="yyyy-MM-dd" type="date" class="label-sel w-220"></el-date-picker>
        </el-form-item>
        <el-form-item label="打款摘要" prop="comment" class="pay-form-item"
                      :rules="[{ required: true, message: '请填写打款摘要'}]">
          <el-input class="w-220" v-model="confirmPayForm.comment" placeholder="请输入转账时填写的 [备注]"></el-input>
        </el-form-item>
      </el-form>

      <el-upload
        class="upload-demo ml-60 mt-15"
        action="/api/sys/no-limit/upload/single"
        :headers="this.$global.setHeaders"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="uploadSuccess"
        multiple
        :on-exceed="handleExceed">
        <el-button size="small" type="primary">上传付款凭证</el-button>
      </el-upload>

      <div slot="footer" class="dialog-footer operate-btns-bottom mt-10">
        <el-button @click="confirmPayVisible=false">取 消</el-button>
        <el-button type="primary" class="ml-30" :loading="confirmPayBtnLoading" @click="savePayOfflineInfo">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import dTable from '../../../components/common/table'

export default {
  components: { dTable },
  data () {
    return {
      // 导航
      pathData: [
        { name: '薪酬管理' },
        { name: '代发薪酬' }
      ],
      pathData1:[
        { name: '账单管理' },
        { name: '账单管理', path: '/billManage' },
        { name: '账单管理', path: '/substituteSalary?billNumber='+this.billedNumber+'&active='+this.active}
      ],
      active: 0,
//      tableData: [],
      searchText: '',
      dataForm: {
        id:'',
        billNumber: '',
        naturePurposeCode: '',
        naturePurposeName: '',
        releaseDate: '',
        payWays:[],
        payWay: '',
        amout: ''
      },
      confirmPayForm: {
        billNumber: '',
        paymentAccount: '',
        amount: '',
        transferDate: '',
        comment: '',
        fileid: '',
        fileIds: []
      },
      billNumber: '',//代发单编号
      billId: '',
      payBtnLoading: false,
      payDialogVisible: false, // 付款弹窗显示
      confirmPayBtnLoading: false,
      confirmPayVisible: false, // 确认汇款弹窗显示
      accountFullName: '',
      bankName: '',
      bankAccount: '',
      identificationCode: '',
      totalBalanceAmount: 0,
      accountId: '',
      summaryData: {
        serialNumbers: '',
        billDate: '',
        billTotalAmount: '0',
        remunerationActualAmount: '0',
        remunerationTaxAmount: '0',
        salaryActualAmount: '0',
        salaryTaxAmount: '0',
        serialNumbers: '',
        serviceFeeTotalAmount: '0',
        yearEndBonusActualAmount: '0',
        yearEndBonusTaxAmount: '0'
      },
      salaryItems: [],
      amountOnline: 0,
      amountOffline: 0,
      showOffline: true,
      amountTypes: [],
      remittedFlag: false, //我已打款
      thirdTitle: '付款',
      fourthTitle: '发放',
      billedNumber: ''
    }
  },
  created () {
    this.billNumber = (this.$route.query.billNumber==null || this.$route.query.billNumber==undefined)?'': this.$route.query.billNumber
    this.billedNumber = (this.$route.query.billNumber==null || this.$route.query.billNumber==undefined)?'': this.$route.query.billNumber
    this.billId = (this.$route.query.billId==null || this.$route.query.billId==undefined)?'': this.$route.query.billId
    var status = this.$route.query.status
    //this.remittedFlag = (this.$route.query.remittedFlag==null || this.$route.query.remittedFlag==undefined)?false: this.$route.query.remittedFlag

    // var fourthTitle = ''
    if(status && status!=null && status!=''){
      if(status == '60003006' || status =='60003004' || status =='60003005'){
        this.active = 3
      }else if(status =='60003001' || status =='60003002' || status =='60003003'){
        this.active = 2
      }
      if(status == '60003003'){
        this.remittedFlag = true
        this.thirdTitle = '付款-处理中'
      }
      if( status =='60003005'){
        this.fourthTitle = '发放中'
      }else if(status == '60003006'){
        this.fourthTitle = '发放成功'
      }
    }
    this.$nextTick(() => {
        //先校验是否有工资业务
      this.checkHasSalaryBusiness()

    })
  },
  computed: {
    firstTableHeight: function () {
      return this.$global.bodyHeight - 270 + 'px'
    },
    secondTableHeight: function () {
      return this.$global.bodyHeight - 450 + 'px'
    }
  },
  watch: {
    summaryData: function (newVal, oldVal) {
      var billTotalAmount = newVal.billTotalAmount
      if(parseFloat(billTotalAmount) > parseFloat(this.totalBalanceAmount)){//如果总金额大于余额，显示线下划款
        this.amountOnline = this.totalBalanceAmount
        this.amountOffline = parseFloat(billTotalAmount) - parseFloat(this.totalBalanceAmount)
        this.showOffline = true
        this.dataForm.payWays = ["1", "2"]
        this.dataForm.payWay = '1,2'
      }else{//反之隐藏
        this.amountOnline = billTotalAmount
        this.amountOffline = 0
        this.showOffline = false
        this.dataForm.payWays = ["1"]
        this.dataForm.payWay = '1'
      }
    }
  },
  methods: {
    checkHasSalaryBusiness(){
      this.$http({
        url: '/salary/insteadBill/checkHasSalaryBusiness',
        method: 'get',
        params: {}
      }).then(({data}) => {
        if(data.code == 0){
            if(data.data == 0){
              this.getFirstTableData()
              this.getAccountBalanceAmount()
              this.getSalaryItems()
              this.getAmountType()
              if(this.billNumber){
                this.getSecondSummaryData()
                this.getSecondTableData()
              }
            }else {
              this.$message({
                type: 'warning',
                message: '该租户没有开通工资业务，请联系客服开通该业务！',
              });
            }
        }else{
          this.$message({
            type: 'error',
            message: '系统异常',
          });
        }
      })
    },
    changeNaturePurpose(value){
        if(value !=undefined && value!=null){
            var options = this.$refs.addFormTypeCode.options
          var currentLabel = ""
          options.forEach(item => {
            if (item.value === value) {
              currentLabel = item.currentLabel
            }
          })
          this.dataForm.naturePurposeName = currentLabel
        }else{
           this.dataForm.naturePurposeName = ''
        }
    },
    getSalaryItems (){
      this.$http({
        url: '/salary/insteadBill/getDynamitHead',
        method: 'get',
        params: {}
      }).then(({data}) => {
        this.salaryItems = data.data==null?[]:data.data
      })
    },
    getAmountType (){
      this.$http({
        url: '/sys/list/dicts/70020',
        method: 'get',
        params: {}
      }).then(({data}) => {
        this.amountTypes = data.data.dictionaries==null?[]:data.data.dictionaries
      })
    },
    getAccountBalanceAmount (){
      this.$http({
        url:'/account/fetchAccount',
        method: 'get',
        params: {
        }
      }).then(({data}) => {
        this.accountId = data.id
        this.totalBalanceAmount = data.totalBalanceAmount
        this.accountFullName = data.accountName
        this.bankName = data.bankName
        this.bankAccount = data.bankAccount
        this.identificationCode = data.identificationCode
      })
    },
    //  导出模板
    exportTemplate () {
      this.$downloadFile('/employeeInfo/getExportTemplate', 'get', {
        moduleCode: this.moduleCode,
        subModuleCode: this.subModuleCode
      }, this.$global.EXCEL, this.moduleList[this.moduleCode + this.subModuleCode])
    },
    //第一步
    getFirstTableData (){
      var that = this
      this.$refs.firstTable.fetch({}, 'get', 'salary/insteadBill/stepOnePage',function(data){
        that.$refs.firstTable.tableData = data.data
      })
    },
    firstNextStep(){
      var selections = this.$refs.firstTable.selections;
      if(selections.length==0){
        this.$message({
          type: 'warning',
          message: '请选择台账',
        });
        return
      }
      var serialNumbers = [];
      selections.forEach(item => {
          serialNumbers.push(item.serialNumber)
      })

      //形成代发单
      this.$http({
        url: '/salary/insteadBill/createInsteadBill',
        method: 'post',
        traditional: true,
        data: this.$qs.stringify({serialNumbers:serialNumbers.join(",")})
      }).then(({data}) =>{
          if(data.code==0 && data.data){
            this.billNumber = data.data.billNumber
            this.billId = data.data.id
            //获取第二步汇总数据
            this.getSecondTableData()

            //获取第二步列表数据
            this.getSecondSummaryData()
            ++this.active
          }else{
            this.$message({
              type: 'error',
              message: data.data.content?data.data.content:'系统异常',
            });
          }
      }).catch((data) =>{
        this.$message({
          type: 'error',
          message: '系统异常',
        });
      })
    },
    //获取第二步汇总数据
    getSecondSummaryData(){
      this.$http({
        url: '/salary/insteadBill/stepTwoSummarize',
        method: 'post',
        data: this.$qs.stringify({billNumber:this.billNumber})
      }).then(({data}) => {
        if (data.code == 0) {
          this.summaryData = data.data
          this.dataForm.amout = data.data.billTotalAmount
        } else {
          this.$message({
            type: 'error',
            message: '系统异常',
          });
        }
      })
    },
    //获取第二步列表数据
    getSecondTableData (){
      var params = [{property: 'billNumber',value: this.billNumber},{property: 'selectMsg', value:this.searchText}]
      this.$refs.secondTable.fetch(params, 'post', '/salary/insteadBill/stepTwoPage')
    },
    //下载筛选结果
    exportSearchData (){
      var requestParams = this.$refs.secondTable.requestParams
      this.$downloadFile('/salary/insteadBill/downloadFilterMsg', 'post',
        this.$qs.stringify({billNumber:requestParams.query[0].value,selectMsg:requestParams.query[1].value}),this.$global.EXCEL)
    },
    surePay (){
      this.payBtnLoading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
            //保存付款方式
          this.savePayWay(this.toNextStepFunc)
        }
        this.payBtnLoading = false
      })
    },
    savePayWay(callback){
      this.dataForm.billNumber = this.billNumber
      this.dataForm.id = this.billId
      this.$http({
        url: '/salary/insteadBill/save/payment',
        method: 'post',
        data: this.dataForm
      }).then(({data}) => {
        if (data.code == 0) {
          callback()
          this.payBtnLoading = false
        } else {
          this.$message({
            type: 'error',
            message: '系统异常',
          });
          this.payBtnLoading = false
        }
      }).catch((data) =>{
        this.$message({
          type: 'error',
          message: '系统异常',
        });
        this.payBtnLoading = false
      })
    },
    toNextStepFunc(){
      //判断是否有线下付款
      var that = this
      if(this.dataForm.payWays.length == 2){
        this.$confirm('友情提示：请及时在预计发放日前进行汇款，否则影响发放发薪，若余额不足将直接发放失败！', '提示', {
          showCancelButton: false,
          showConfirmButton: false,
          type: 'warning',
          center: true,
          beforeClose:function (action, instance, done) {
            that.remittedFlag = true
            that.payDialogVisible = false
            that.thirdTitle = '付款-待打款'
            done()
          }
        })
      }else{
        this.payDialogVisible = false
        ++this.active
        this.fourthTitle = '发放中'
      }
    },
    //上传成功后
    uploadSuccess (response, file, fileList){
      var fileId = response.data.id//文件id
      this.confirmPayForm.fileIds.push(fileId)
      this.confirmPayForm.fileid = this.confirmPayForm.fileIds.join(",")
    },
    handleRemove(file, fileList) {
      this.confirmPayForm.fileIds = []
      this.confirmPayForm.fileid = ''
      if(fileList.length>0){
        fileList.forEach(item => {
          this.confirmPayForm.fileIds.push(item.response.data.id)
        })
        this.confirmPayForm.fileid = this.confirmPayForm.fileIds.join(",")
      }
    },
    //保存确认打款信息
    savePayOfflineInfo(){
      this.confirmPayBtnLoading = true
      this.$refs['confirmPayForm'].validate((valid) => {
        if (valid) {
          this.confirmPayForm.billNumber = this.billNumber
          this.$http({
            url:'/salary/insteadBill/save/remittance',
            method: 'post',
            data: this.confirmPayForm
          }).then(({data}) => {
            if (data.code == 0) {
              this.confirmPayVisible=false
              this.thirdTitle = '付款-处理中'
              ++this.active
            } else {
              this.$message({
                type: 'error',
                message: '系统异常',
              });
            }
          })
        }
        this.confirmPayBtnLoading = false
      })
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>
<style lang="less" scoped>
  .emp-container {
    padding: 30px 20px 20px 20px;

    .search-row {
      padding-top: 10px;
      margin-bottom: -5px;
    }
  }

  .pay-form-item {
    margin-bottom: 10px;
  }

  .el-radio--small.is-bordered {
    height: 45px;
    line-height: 45px;
    padding-top: 0;
  }
  .div-border-radius{
    margin-top: 20px;
    padding: 5px 20px 10px 20px;
    .detail-text{
      margin-top: 5px;
    }
  }
</style>
